<template>
  <el-col :span="20" :push="2">
    <el-col :span="4">
      <el-menu
        :default-active="defaultIndex"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        height="100%"
        @select="findUser"
      >
        <el-menu-item index="1">
          <i class="el-icon-menu"></i>
          <span slot="title">主页</span>
        </el-menu-item>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>产品</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="2-1">产品清单</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>销售订单</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="3-1">订单销售详情</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>采购订单</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="4-1">订单采购详情</el-menu-item>
            <el-menu-item index="4-2">投标页面</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>消息通知</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="5-1">消息通知详情</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-col>
    <el-col :span="20">
      <el-dropdown @command="handleCommand" style="float: right">
  <span class="el-dropdown-link" >
    欢迎你,{{userName}}<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="a">更改密码</el-dropdown-item>
          <el-dropdown-item command="b">查看审核状态</el-dropdown-item>
          <el-dropdown-item command="c">修改供应商信息</el-dropdown-item>
          <el-dropdown-item command="d">注销供应商</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <component :is="component" :value="value"/>
    </el-col>
  </el-col>
</template>
<script>
import Home from "../views/Home.vue"
import ProductList from  "../components/ProductList.vue"
import goodsSaleDetail from "../components/goodsSaleDetail.vue"
import goodsPurchaseDetail from "../components/goodsPurchaseDetail.vue"
import tender from "../components/tender.vue"
import infoNotice from  "../components/infoNotice.vue"
import changePassword from "./changePassword";
import examineAndVerify from "./examineAndVerify";
import changeSupplierInfo from "./changeSupplierInfo";
import logoutSupplier from "./logoutSupplier";
export default {
  name: "NavMenu",
  data() {
    return {
      defaultIndex: "1",
      userName: this.$store.state.userName,
      component: Home,
      value: '1',
    };
  },
  methods: {
    handleCommand(command) {
      if (command == 'a'){
        //更改密码
        this.component = changePassword;
      }
      if (command == 'b'){
        //查看审核状态
        this.component = examineAndVerify
      }
      if (command == 'c'){
        //修改供应商信息
        this.component = changeSupplierInfo
      }
      if (command == 'd'){
        //注销供应商
        this.component = logoutSupplier
      }
    },
    findUser(index) {
      if (index == 1) {
        // 主页
        this.component = Home;
      }
      if (index == "2-1") {
        // 产品清单
        this.component = ProductList;
      }
      if (index == "3-1") {
        // 订单销售详情
        this.component = goodsSaleDetail;
      }
      if (index == "4-1") {
        // 订单采购详情
        this.component = goodsPurchaseDetail;
      }
      if (index == "4-2") {
        // 投标页面
        this.component = tender;
      }
      if (index == "5-1") {
        // 消息通知详情
        this.component = infoNotice;
      }
    },
  }
};
</script>

<style scoped>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>